<template>
  <div>
    <div class="box">
      <div class="left" style="width: 75%;">
        <div>
          <div
            style="padding:10px 20px;border-bottom: 1px solid #e4e7ed"
          >{{ getdata.name }}/{{ pathdata[0] }}</div>
          <div>
            <div class="left-xbox">
              <div class="left-xobx-x">
                <h5 class="left-box-h5">线索创建时间</h5>
                <span class="left-box-span">{{ getdata.belongTime }}</span>
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">客户手机号码</h5>
                <span class="left-box-span">{{ getdata.phone }}</span>
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">渠道来源</h5>
                <span class="left-box-span">{{ getdata.channelName }}</span>
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x">
                <h5 class="left-box-h5">线索分配者</h5>
                <span class="left-box-span">{{ getdata.allocator }}</span>
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">线索分配时间</h5>
                <span class="left-box-span">{{ getdata.createTime }}</span>
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">线索归属者</h5>
                <span class="left-box-span">{{ getdata.owner }}</span>
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x" style="width: 66%;">
                <h5 class="left-box-h5">所属促销活动信息</h5>
                <span class="left-box-span">{{ getdata.activityName }}/{{ getdata.activityInfo }}</span>
              </div>
              <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;">
                <el-button type="danger" :disabled="idd=='follow'?false:true" @click="qweasd">无效线索</el-button>
                <el-button type="primary" :disabled="idd=='follow'?false:true" @click="open">转为商机</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 线索跟进 -->
        <div>
          <div style="padding:10px 20px;border-bottom: 1px solid #e4e7ed">线索跟进</div>
          <div>
            <div class="left-xbox">
              <div class="left-xobx-x">
                <h5 class="left-box-h5">客户姓名</h5>
                <el-input
                  style="width: 90%;"
                  v-model="getdata.name"
                  :disabled="idd=='follow'?false:true"
                  placeholder="Please input"
                />
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">性别</h5>
                <el-select
                  style="width: 150px"
                  :disabled="idd=='follow'?false:true"
                  v-model="getdata.gender"
                  placeholder="渠道来源"
                >
                  <el-option label="男" :value="0" />
                  <el-option label="女" :value="1" />
                  <el-option label="未知" :value="2" />
                </el-select>
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">年龄</h5>
                <el-input-number
                  v-model="getdata.age"
                  :disabled="idd=='follow'?false:true"
                  placeholder="年龄"
                  :min="6"
                />
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x">
                <h5 class="left-box-h5">客户微信号码</h5>
                <el-input
                  style="width: 90%;"
                  v-model="getdata.weixin"
                  :disabled="idd=='follow'?false:true"
                  placeholder="Please input"
                />
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">客户QQ号码</h5>
                <el-input
                  style="width: 90%;"
                  v-model="getdata.qq"
                  :disabled="idd=='follow'?false:true"
                  placeholder="Please input"
                />
              </div>
              <div class="left-xobx-x">
                <h5 class="left-box-h5">客户手机号码</h5>
                <el-input
                  style="width: 90%;"
                  v-model="getdata.phone"
                  :disabled="idd=='follow'?false:true"
                  placeholder="Please input"
                />
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x" style="width: 66%;">
                <h5 class="left-box-h5">客户意向等级</h5>
                <el-radio-group
                  v-model="getdata.level"
                  :disabled="idd=='follow'?false:true"
                  class="ml-4"
                >
                  <el-radio label="1" size="large">近期报名</el-radio>
                  <el-radio label="2" size="large">打算报名、考虑一下</el-radio>
                  <el-radio label="3" size="large">了解一下</el-radio>
                  <el-radio label="4" size="large">打酱油</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x" style="width: 66%;">
                <h5 class="left-box-h5">客户意向类型</h5>
                <el-radio-group
                  v-model="getdata.subject"
                  :disabled="idd=='follow'?false:true"
                  class="ml-4"
                >
                  <el-radio label="1" size="large">舞蹈类</el-radio>
                  <el-radio label="2" size="large">游泳类</el-radio>
                  <el-radio label="3" size="large">拳击类</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x" style="width: 66%;">
                <h5 class="left-box-h5">跟进记录</h5>
                <el-input
                  v-model="getdata.record"
                  style="width: 90%;"
                  :rows="2"
                  :disabled="idd=='follow'?false:true"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </div>
            </div>
            <div class="left-xbox">
              <div class="left-xobx-x" style="width: 66%;">
                <h5 class="left-box-h5">下次跟进时间</h5>
                <el-date-picker
                  v-model="getdata.nextTime"
                  type="datetime"
                  :disabled="idd=='follow'?false:true"
                  placeholder="Select date and time"
                />
              </div>
            </div>
            <div style="display: flex;padding:20px;justify-content: flex-end;">
              <el-button type="primary" :disabled="idd=='follow'?false:true" @click="qw">提交</el-button>
              <el-button @click="houhui">返回</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div style="padding:10px 20px;border-bottom: 1px solid #e4e7ed">线索跟进记录</div>
        <div :style="idd=='follow'?'':'display: none'">
          <div v-for="(item ,index) in leftda" style="padding: 20px ;">
            <div>
              <span style="font-weight: bold;font-style: italic;">{{item.createBy}}:</span>
              {{item.info}}
            </div>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog v-model="dialogFormVisiblexin" title="无效线索" width="500">
      <el-form-item label="原因">
        <el-select :disabled="idd=='follow'?false:true" v-model="add.gender" placeholder="请选择原因">
          <el-option label="空号" value="空号" />
          <el-option label="停机" value="停机" />
          <el-option label="无法联系" value="无法联系" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="add.num" style="width: 300px;" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <div class="dialog-footer" style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="subit">确定</el-button>
        <el-button @click="dialogFormVisiblexin=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup >
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElTable, ElMessageBox } from "element-plus";
import {
  cluedata,
  followQS,
  recordarta,
  tobusiness,
  invalid
} from "@/api/tienchin/xiansuoguanli";
const router = useRouter();
const route = useRoute();
const pathdata = ref("");
const getdata = ref("");
const radio1 = ref("0");
const radio2 = ref("0");
const idd = ref("");
const dialogFormVisiblexin = ref(false);
const add = ref({
  gender: "",
  num: ""
});
const qweasd = () => {
  dialogFormVisiblexin.value = true;
};
const leftda = ref([]);
onMounted(() => {
  const queryParams = route.path.split("index/")[1].split("/");
  idd.value = queryParams[1];
  pathdata.value = queryParams;
  console.log(pathdata.value);
  cluedata(pathdata.value[0]).then(res => {
    if (res.code != 200) return ElMessage.error("查询用户列表失败");
    getdata.value = res.data;
    radio2.value = getdata.value;
    getdata.value.level = String(res.data.level);
    getdata.value.subject = String(res.data.subject);
    getdata.value.belongTime.split("T");
    getdata.value.belongTime =
      getdata.value.belongTime.split("T")[0] +
      " " +
      getdata.value.belongTime.split("T")[1];
    getdata.value.createTime =
      getdata.value.createTime.split("T")[0] +
      " " +
      getdata.value.createTime.split("T")[1];
    console.log(getdata.value);
  });
  recordarta(pathdata.value[0]).then(res => {
    if (res.code != 200) return ElMessage.error("查询用户列表失败");
    leftda.value = res.data;
    for (let i = 0; i < leftda.value.length; i++) {
      leftda.value[i].createTime =
        leftda.value[i].createTime.split("T")[0] +
        " " +
        leftda.value[i].createTime.split("T")[1];
    }
  });

  console.log(leftda.value);
});
//
const subit = () => {
  console.log(add.value);
  radio2.value.subject = null;
  radio2.value.level = null;
  radio2.value.record = add.value.gender + ":" + add.value.num;
  radio2.value.belongTime =
    radio2.value.belongTime.split(" ")[0] +
    "T" +
    radio2.value.belongTime.split(" ")[1];
  radio2.value.createTime =
    radio2.value.createTime.split(" ")[0] +
    "T" +
    radio2.value.createTime.split(" ")[1];
  console.log(radio2.value);
  invalid(radio2.value).then(res => {
    console.log(res);
    if (res.code != 200) return ElMessage.error("查询用户列表失败");
    router.push("/clue");
  });
};
//提交
const qw = () => {
  getdata.value.belongTime.split(" ");
  getdata.value.belongTime =
    getdata.value.belongTime.split(" ")[0] +
    "T" +
    getdata.value.belongTime.split(" ")[1];
  getdata.value.createTime =
    getdata.value.createTime.split(" ")[0] +
    "T" +
    getdata.value.createTime.split(" ")[1];
  getdata.value.level = Number(getdata.value.level);
  getdata.value.subject = Number(getdata.value.subject);

  console.log(getdata.value);
  followQS(getdata.value).then(res => {
    console.log(res);
    if (res.code != 200) return ElMessage.error("查询用户列表失败");
    router.push("/clue");
  });
};
const open = () => {
  ElMessageBox.confirm("是否将当前线索转化为客户?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      tobusiness(pathdata.value[0]).then(res => {
        console.log(res);
        if (res.code != 200) return ElMessage.error("查询用户列表失败");
        router.push("/clue");
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作"
      });
    });
};
//返回
const houhui = () => {
  router.push("/clue");
};
//上传
const updatad = ref({});
</script>

<style lang="scss" scoped>
.box {
  display: flex;

  justify-content: space-between;
}
.left {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  width: 75%;
  margin-top: 10px;
  .left-xbox {
    display: flex;
    padding-left: 20px;
    .left-xobx-x {
      width: 33%;
      margin-bottom: 10px;
    }
    .left-box-h5 {
      margin: 10px 0;
      font-weight: 800;
      font-size: 16px;
      font-style: italic;
    }
    .left-box-span {
      color: rgb(131, 146, 166);
    }
  }
}
.right {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  width: 24%;
  margin-top: 10px;
}
</style>